layui.use(['common'], (common) => {
    var $ = layui.$
        , admin = layui.admin
        , form = layui.form
        , element = layui.element
        , upload = layui.upload

    admin.req({
        url: window.globalConfig.url_config,
        type: "GET",
        done(d) {
            let data = d.data;
            let count = d.count;
            for (let i = 0; i < count; i++) {

                let $systemInfo = data[i].subConfig
                let formHtml = '';
                for (let i = 0; i < $systemInfo.length; i++) {
                    let field = $systemInfo[i].code;
                    let type = $systemInfo[i].type;
                    let comment = $systemInfo[i].name;
                    // let nulls = $systemInfo[i].nulls;
                    let configValue = $systemInfo[i].value;
                    let fieldId = $systemInfo[i].id;
                    let tips = $systemInfo[i].tip ?? "";

                    // 根据数据类型生成相应的表单字段
                    let inputHtml = '';
                    if (type === 'text') {
                        inputHtml = `<input type="text" name="${fieldId}" placeholder="请输入${comment}" value="${configValue}" class="layui-input" >`;
                    } else if (type === 'password') {
                        inputHtml = `<input type="password"  lay-affix="eye"  name="${fieldId}" placeholder="请输入${comment}" value="${configValue}" class="layui-input" >`;
                    } else if (type === 'int') {
                        inputHtml = `<input type="number" name="${fieldId}" placeholder="请输入${comment}" value="${configValue}" class="layui-input">`;
                    } else if (type === 'file') {
                        // 处理图片
                        let imgSrc = "./res/style/imgs/upload.png"
                        if (configValue) {
                            imgSrc = window.globalConfig.img_bind_url + configValue
                        }


                        inputHtml = `
                                <div class="layui-upload-list" id="ID-upload-sysinfo-${fieldId}" lay-data="${fieldId}">
                                            <img src="${imgSrc}"
                                                    id="ID-upload-sysinfo-img-${fieldId}"
                                                     class="layui-upload-img"
                                                      style="background: #0b1a2c" 
                                                     >
                                    </div>
                                 <input type="hidden" name="${fieldId}" id="ID-upload-sysinfo-input-${fieldId}" value="${configValue}">
                                `;


                    } else if (type === 'radio') {
                        inputHtml = `<input type="checkbox" name="${fieldId}" value="1" title="开启|关闭" lay-skin="switch" `;
                        if (configValue==='1'){
                            inputHtml += ` checked `
                        }
                        inputHtml+=` > `
                    } else if (type === 'textarea') {
                        inputHtml = `<textarea  name="${fieldId}" rows="5"  class="layui-textarea">${configValue}</textarea>`;
                    }

                    // 添加表单字段到表单 HTML 中
                    formHtml += `
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">${comment}</label>
                                        <div class="layui-input-inline" style="width: 50%">
                                            ${inputHtml}
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">${tips}</div>
                                    </div>`;
                }
                formHtml += `
                        <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="set_website_config">确认保存</button>
                                        </div>
                                    </div>
                        `;

                // 将表单 HTML 添加到页面中

                element.tabAdd('lay-settings-header', {
                    title: data[i].name,
                    id: data[i].id, // 实际使用一般是规定好的id，这里以毫秒数模拟
                    content: formHtml,
                    change: false // 是否添加完毕后即自动切换
                })
                // todo 处理图片显示的问题
                let imgDoms = $("div[id^='ID-upload-sysinfo-']")
                for (let i = 0; i < imgDoms.length; i++) {
                    let configId = $(imgDoms[i]).attr('lay-data');
                    common.uploader(imgDoms[i]['id'], `ID-upload-sysinfo-img-${configId}`, `ID-upload-sysinfo-input-${configId}`)
                }
            }

            // 渲染表单
            form.render()
            element.tabChange('lay-settings-header', data[0].id);

            // element.on('tab(lay-settings-header)', (data) => {
            //     let systemConfigId = data.elem.context.getAttribute('lay-id');
            //     // 获取表单信息
            //
            // })
        }
    })


    form.on("submit(set_website_config)", function (obj) {
        var fields = obj.field; // 获得表单字段
        var keys = Object.keys(fields);
        var postData = []
        for (let i = 0; i < keys.length; i++) {
            if (fields[keys[i]] !== "") {
                postData.push({
                    id: keys[i],
                    value: fields[keys[i]]
                })
            }
        }
        // checkbox
        var checkboxes = $('input[type="checkbox"]');
        for (let i = 0; i < checkboxes.length; i++) {
            postData.push({
                id: checkboxes[i].name,
                value: checkboxes[i].checked ? 1 : 0
            })
        }
        admin.req({
            url: window.globalConfig.url_config + "/1"
            , type: "PUT"
            , data: {
                data: postData
            }
            , success: function (res) {
                layer.msg(res.msg)
            }
        });
        return false;
    });

})
